<!--
 * @Description: 
 * @Author: liuzl
 * @Date: 2024-11-12 11:31:54
 * @LastEditors: liuzl
 * @LastEditTime: 2024-11-13 19:42:09
-->


<!-- 页面主体结构 -->
<template>
  <h1>hello,vue</h1>
  <h1>末班语法</h1>
  <h2>文本插值-最基本的数据绑定形式-双大括号语法</h2>
  a:{{a}}
  <h2>展示原始Html-扫码支付</h2>
  <div v-html="b"></div>
  <h2>属性绑定</h2>
  <div id="app2">id为app2</div>
  <!-- <div v-bind:id="id3">id为app3</div> -->
  <!-- 与上面的写法具有相同的效果 -->
  <div :id="id3">id为app3</div>
  <h2>直接使用js表达式</h2>
  {{ 1 + 1 }}
  <br>
  {{ a + 1 }}
  <br>
  {{ 1 == 1 ? "yes" : "no" }}
  <h1>响应式数据</h1>
  <h2>声明响应式数据</h2>
  响应式数据在页面中的使用
  count:{{ count }}
  <br>
  响应式数据在js代码中使用
  count.value
  <!-- 一个使count自增的按钮 -->
  <button @click="count++">
    count++
  </button>
  <button @click="countAdd">
    countAdd
  </button>
  <!-- 一个使 a 自增的按钮 -->
  a:{{ a }}
  <button @click="a++">
    a++
  </button>
  <h1>类与样式的绑定</h1>
  <h2> class绑定 </h2>
  <button @click="changeActive">切换active</button>
  <!-- active是类名 isActive是一个boolean值-->
  <div class="myDiv myDiv2" :class="{
    active: isActive,
    'text_success': noError,
  }">class-对象方式绑定</div>
  <div :class="[isActive ? 'active' : 'noActive', 'arrClass']">
    class-数组方式绑定
  </div>
  <h2> style绑定 </h2>
  <p>style写css属性名，使用小驼峰命名法</p>
  <p>或者'font-size'</p>
  <div :style="{ color: activeColor, 'font-size': fontSize + 'px' }">style绑定 - {{ activeColor }}</div>
  <button @click="changeActiveColor('blue')">蓝色</button>
  <button @click="changeActiveColor('green')">绿色</button>
  <button @click="changeActiveColor('orange')">黄色</button>
  <button @click="changeActiveColor('black')">黑色</button>

  <h1>条件渲染</h1>
  <h2> v-if v-else v-show</h2>
  <button @click="changeFlag">{{ flag }}</button>
  <div v-if="flag">白天 ☀️ </div>
  <div v-else>晚上 🌛</div>
  <p>
    v-if不满足条件时 dom会删除这个元素
    v-show不满足条件时 dom会隐藏这个元素
    区别：
      v-if:时间监听器和子组件都会被销毁与重建
      所以频繁切换 开销比较高
      v-if是惰性的 如果初始条件时false则不会创建这个元素
      v-show：css的display无论初始条件是false还是true这个元素都会被创建，条件变化时，元素也不会被销毁
      如果需要频繁切换，就用v-show
  </p>
  <div v-show="flag">云朵 ☁️</div>
  <h1>列表渲染</h1>
  <h2>v-for</h2>
  <div v-for="a in arr">
  <p>{{a}}</p>
</div>
  <div v-for="(o,index) in obj" :key="o.id">
  <p>{{index}}-姓名{{o.name}}-年龄:{{o.age}}</p>
</div>
<!-- 生成n个指定标签 -->
<p v-for="n in 10">{{ n }}</p>
<h1>事件处理</h1>
  <h2>v-on 简写@用于监听DOM事件</h2>
  <p>count:{{count}}</p>
  <button @click="countAdd">count++</button>
  <button @click="countAddNum(3)">count+3</button>
  <!-- 捕获原生事件对象 -->
  <button @click="countAddEvent($event)">countEvent</button>

  <button v-on:click="countAdd">v-on:click-count++</button>
  <br>
  <br>
<!-- 键盘事件 -->
<input @keyup.enter="login" type="text">
<input @keyup.alt.enter="enter" type="text">
<!-- ctrl+点击 -->
<!-- <input @click.ctrl="enter" type="text"> -->
<!-- .left.right.middle -->
<h1>表单输入与绑定</h1>
  <h2>基本用法</h2>
  用户名:{{ username }}
  密码:{{ password }}
  管理员:{{ checked }}
  性别:{{ gender }}
  爱好:{{ likes }}
  <br>
  用户名<input v-model = "username" type="text" placeholder="请输入用户名">
  密码<input v-model = "password" type="text" placeholder="请输入密码"@keyup.enter="login">

  <br>
  管理员<input type="checkbox" v-model="checked">
  <br>
  男<input type="radio" value="man" v-model="gender">
  女<input type="radio" value="women" v-model="gender">
<br>
爱好
<select v-model="likes" multiple>
  <!-- 单值属性 -->
  <!-- :disabled="true" -->
  <!-- disabled -->
<option :disabled="true" value="">请选择你的爱好</option>
<option v-for="i in items" :value="i.value">{{ i.name }}</option>
</select>
<button @click="login">登录</button>
<!-- 自定义组件的使用 -->
  <!-- 控制子组件的字体大小 -->
<button @click="addFontSize">字体变大</button>
<button @click="reduceFontSize">字体变小</button>
<CountAdd ref="childRef" num="5"></CountAdd>

<!-- 组件传参 -->

<!-- <CountAdd num="10"/> -->
<!-- 事件监听 -->
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</template>
//写js代码
<script setup>
// 声明响应式数据
import { ref, onMounted, onUpdated, onUnmounted } from 'vue'
//获取子组件
const childRef = ref(null);
// 导入自定义组件

import CountAdd from '@/components/CountAdd/CountAdd.vue'
// ref()函数 用于声明响应式状态
const arr = ["苹果","香蕉","橘子"];
const obj = [
  {id:1,name:'zs',age:12},
  {id:2,name:'ls',age:13},
  {id:3,name:'ww',age:14},

];
const username = ref("");
const password = ref("");
const checked = ref(true);
const gender = ref("男");
const likes = ref([]);
const items = ref([]);
//父组件中的方法
function addFontSize(){
  console.log('🚀TTT ~ childAddFont ~ 增加子组件的字体大小',)
  if(childRef.value){
    console.log('🚀TTT ~ childAddFont ~ childRef.value:', childRef.value)
    // childRef.value
    // 调用子组件中暴露出来的方法
    childRef.value.childAddFont();
  }
  
}
function reduceFontSize() {
  if (childRef.value) {
    childRef.value.childReduceFont();
  }
}
//方法的调用
getItems();
//模拟网络请求 方法的声明
function getItems(){
  var timeoutId = setTimeout(() =>{
  
  //发送网络请求 获取到了数据 http
  items.value=[
    {value:"篮球",name:"篮球"},
    {value:"足球",name:"足球"},
    {value:"网球",name:"网球"},

  ]
},4000);
console.log('🚀TTT ~ timeoutId ~ timeoutId:', timeoutId)
}
const isActive = ref(true);
const noError = ref(true);
const activeColor = ref("hotpink");
const fontSize = ref(30);
const flag = ref(true);
// 声明一个初始值为0的响应式数据count
const count = ref(0);

// 响应式数据如果在js中使用 需要.value访问
console.log('🚀TTT ~ count:', count)
console.log('🚀TTT ~ count.value:', count.value)
count.value++
console.log('🚀TTT ~ count.value:', count.value)
// countAdd方法的声明
function countAdd () {
  count.value++;
}
function countAddNum (num) {
  count.value+=num;
}
function countAddEvent (event) {
  console.log('🚀TTT ~ countAddEvent ~ event:', event)
  
}

  
function enter () {
  alert("换行")
}
function changeActive () {
  isActive.value = !isActive.value;
}
function changeActiveColor (color) {
  activeColor.value = color;
}
function changeFlag () {
  flag.value = !flag.value;
}
function login () {
console.log('🚀TTT ~ login ~ username:', username)
console.log('🚀TTT ~ login ~ password:', password)
var str = "";
  if(checked.value){
    str = "管理员"
  }
  if(
    (username.value == "admin")
    &&
    (password.value == "123")
    )
    {
      alert(str+"登录成功")
    }else{
      alert(str+"用户名与密码不匹配")
    }
  
  // alert("正在登录")
  
}
//声明一个变量a并且初始化
var a = 10;
var b = '<span style="color:red;">这个是一个文字为红色的span标签</span>';
var id3 = 'app3';
onMounted(
  () => {
    // alert("onMounted");
    console.log('🚀TTT ~ onMounted:')
  }
)

onUpdated(() => {
  console.log('🚀TTT ~ onUpdated ~ onUpdated:')
})
onUnmounted(() => {
  // alert('🤡 CC - onUnmounted - onUnmounted');
  // 组件被卸载 会触发 
  // 清除定时器 事件监听等内容
  clearTimeout(timeoutId);
  // clearInterval(intervalId);
})
</script>
<!-- 页面样式 -->
<style scoped>
.active {
  color: red;
  font-size: 26px;
}

.noActive {
  color: orange;
}
</style>